import React, { useRef, useState, useEffect } from "react";
import style from "./style.less";
import { nationList } from "@/plugins/utils";
export default () => {
  const ref = useRef();
  const [radius, setRadius] = useState(0);

  useEffect(() => {
    let w = ref.current.offsetWidth;
    console.log("clientWidth", w);
    setRadius(w / 2 - 40);
  }, []);
  return (
    <>
      <div className={style.box_wrap} ref={ref}>
        <ul style={{ width: "100%", height: "100%" }} className={style.wrap}>
          {nationList.map((e, index) =>
            (
              <li className={style.circle} key={index} style={{ transform: `rotateZ(${360 * index / nationList.length}deg) translateY(${radius}px)` }}>
                <p
                  className={style.content}
                  style={{ transform: `rotateZ(${-360 * index / nationList.length }deg)` }}
                >
                  <label>{e}</label>
                </p>
              </li>))
    }
        </ul>
      </div>
      <div className={style.left}></div>
      <div className={style.right}></div>
    </>
  );
};
